<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <script src="./lib/vue.js"></script>
</body>

</html>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./lib/vue.js"></script>
</head>

<body>
  <div id="app">
    <div v-red>{{name}}</div>
  </div>

  <script>
    // 必须要在new Vue之前调用
    // 函数
    /* function install(Vue, options) {

      Vue.directive('red', el => el.style.color = 'red')
      // 静态方法
      Vue.fn = function () {
        console.log('fn-instal')
      };
      // 原型中添加方法
      Vue.prototype.fn = function () {
        console.log('fnfnfnfnfnfn')
      }
      // 混入
      Vue.mixin({
        data: () => ({ name: '张三' })
      })
    } */

    let installPlugin = {
      // 对象的形式必须要有install 方法
      install(Vue, options) {

        Vue.directive('red', el => el.style.color = 'red')
        // 静态方法
        Vue.fn = function () {
          console.log('fn-instal')
        };
        // 原型中添加方法
        Vue.prototype.fn = function () {
          console.log('fnfnfnfnfnfn')
        }
        // 混入
        Vue.mixin({
          data: () => ({ name: '张三' })
        })
      }
    }

    class MyVuePlugin {
      // 静态方法 install
      static install(Vue, options) {
        Vue.directive('red', el => el.style.color = 'red')
        // 静态方法
        Vue.fn = function () {
          console.log('fn-instal')
        };
        // 原型中添加方法
        Vue.prototype.fn = function () {
          console.log('fnfnfnfnfnfn')
        }
        // 混入
        Vue.mixin({
          data: () => ({ name: '张三' })
        })
      }
    }
    // Vue.use(install, { id: 1 })
    Vue.use(MyVuePlugin)

    let vm = new Vue({
      data: {
      }
    }).$mount('#app')
    console.log(vm.fn)
  </script>
</body>

</html>